eslint-plugin-react

What is eslint-plugin-react?

The eslint-plugin-react is a plugin for ESLint that provides linting utilities for React and JSX specific code. It helps developers adhere to best practices and avoid common pitfalls in React development.

What are eslint-plugin-react's main functionalities?

JSX-specific rules

Enforces rules specific to JSX, such as ensuring that any variables used in JSX are defined and that React is in scope when using JSX.

"react/jsx-uses-react": "error", "react/jsx-uses-vars": "error"

Hooks rules

Provides rules that enforce the correct usage of React Hooks, such as ensuring that hooks are called in the same order on every render and that dependencies are specified correctly for useEffect.

"react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn"

Prop-types validation

Ensures that prop types are correctly defined and used within React components, helping to catch type-related bugs.

"react/prop-types": "error"

Component lifecycle

Warns about usage of deprecated methods in React component lifecycle, encouraging developers to update to newer APIs.

"react/no-deprecated": "warn"

Best practices

Encourages best practices by warning against common anti-patterns like using array indices as keys or mutating state directly.

"react/no-array-index-key": "warn", "react/no-direct-mutation-state": "error"

Other packages similar to eslint-plugin-react

eslint-plugin-vue

Similar to eslint-plugin-react, eslint-plugin-vue provides linting rules specific to Vue.js framework. It helps enforce Vue-specific best practices and coding standards.

eslint-plugin-angular

This plugin is similar to eslint-plugin-react but for Angular applications. It contains rules that enforce best practices and conventions in AngularJS projects.

eslint-plugin-jsx-a11y

While not specific to React, eslint-plugin-jsx-a11y works well with eslint-plugin-react to enforce accessibility practices in JSX elements.

eslint-plugin-preact

This plugin is designed for Preact (a fast 3kB alternative to React with the same ES6 API) and provides linting rules tailored to Preact codebases.

README

ESLint-plugin-React

React specific linting rules for ESLint

Installation

Install ESLint either locally or globally.

$ npm install eslint

If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

$ npm install eslint-plugin-react

Configuration

Add plugins section and specify ESLint-plugin-React as a plugin.

{
  "plugins": [
    "react"
  ]
}

You can also specify some settings that will be shared across all the plugin rules.

{
  "settings": {
    "react": {
      "pragma": "React",  // Pragma to use, default to "React"
      "version": "0.14.0" // React version, default to the latest React stable release
    }
  }
}

If it is not already the case you must also configure ESLint to support JSX.

With ESLint 1.x.x:

{
  "ecmaFeatures": {
    "jsx": true
  }
}

With ESLint 2.x.x:

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Finally, enable all of the rules that you would like to use.

The plugin has a recommended configuration that enforces React good practices.

List of supported rules

• display-name: Prevent missing displayName in a React component definition
• forbid-prop-types: Forbid certain propTypes
• no-danger: Prevent usage of dangerous JSX properties
• no-deprecated: Prevent usage of deprecated methods
• no-did-mount-set-state: Prevent usage of setState in componentDidMount
• no-did-update-set-state: Prevent usage of setState in componentDidUpdate
• no-direct-mutation-state: Prevent direct mutation of this.state
• no-is-mounted: Prevent usage of isMounted
• no-multi-comp: Prevent multiple component definition per file
• no-set-state: Prevent usage of setState
• no-string-refs: Prevent using string references in ref attribute.
• no-unknown-property: Prevent usage of unknown DOM property (fixable)
• prefer-es6-class: Enforce ES5 or ES6 class for React Components
• prefer-stateless-function: Enforce stateless React Components to be written as a pure function
• prop-types: Prevent missing props validation in a React component definition
• react-in-jsx-scope: Prevent missing React when using JSX
• require-extension: Restrict file extensions that may be required
• self-closing-comp: Prevent extra closing tags for components without children
• sort-comp: Enforce component methods order
• sort-prop-types: Enforce propTypes declarations alphabetical sorting
• wrap-multilines: Prevent missing parentheses around multilines JSX (fixable)

JSX-specific rules

• jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable)
• jsx-closing-bracket-location: Validate closing bracket location in JSX (fixable)
• jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
• jsx-equals-spacing: Enforce or disallow spaces around equal signs in JSX attributes (fixable)
• jsx-handler-names: Enforce event handler naming conventions in JSX
• jsx-indent-props: Validate props indentation in JSX (fixable)
• jsx-indent: Validate JSX indentation
• jsx-key: Validate JSX has key prop when in array or iterator
• jsx-max-props-per-line: Limit maximum of props on a single line in JSX
• jsx-no-bind: Prevent usage of .bind() and arrow functions in JSX props
• jsx-no-duplicate-props: Prevent duplicate props in JSX
• jsx-no-literals: Prevent usage of unwrapped JSX strings
• jsx-no-undef: Disallow undeclared variables in JSX
• jsx-pascal-case: Enforce PascalCase for user-defined JSX components
• jsx-sort-props: Enforce props alphabetical sorting
• jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable)
• jsx-uses-react: Prevent React to be incorrectly marked as unused
• jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused

React Native rules

If you're searching for React Native specific linting rules, check out eslint-plugin-react-native.

Recommended configuration

This plugin exports a recommended configuration that enforce React good practices.

To enable this configuration use the extends property in your .eslintrc config file:

{
  "plugins": [
    "react"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

See ESLint documentation for more information about extending configuration files.

The rules enabled in this configuration are:

• display-name
• jsx-no-duplicate-props
• jsx-no-undef
• jsx-uses-react
• jsx-uses-vars
• no-danger
• no-deprecated
• no-did-mount-set-state with allow-in-func option
• no-did-update-set-state with allow-in-func option
• no-direct-mutation-state
• no-is-mounted
• no-unknown-property
• prop-types
• react-in-jsx-scope

Note: This configuration will also enable JSX in parser options.

License

ESLint-plugin-React is licensed under the MIT License.

Changelog

[4.3.0] - 2016-04-07

Added

• Add [require-render-return][] rule ([#482][] @shmuga)
• Add auto fix for [jsx-equals-spacing][] ([#506][] @peet)
• Add auto fix for [jsx-closing-bracket-location][] ([#511][] @KevinGrandon)

Fixed

• Fix [prefer-stateless-function][] for conditional JSX ([#516][])
• Fix [jsx-pascal-case][] to support single letter component names ([#505][] @dthielman)

Changed

• Update dependencies
• Documentation improvements ([#509][] @coryhouse, [#526][] @ahoym)